I am New In Vue.js Technology , am getting an error while running my Vue application. Don't Know Where I am Wrong, Please Try to Fix My error.
This is The Temp File where I Getting an Error.
Temp.vue
<template>
<div>
<h1>Hello Ashish</h1>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
name: "Temp",
};
</script>
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!-- <HomeComp msg="Hello Harshal"/> -->
<!-- <ForLoop/> -->
<Temp/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
// import HomeComp from './components/HomeComp.vue';
// import ForLoop from './components/ForLoop.vue';
import Temp from './components/Temp.vue';
export default {
name: 'App',
components: {
HelloWorld,
// HomeComp,
// ForLoop
// Demo,
Temp
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I would like to add one more point， When you change the component name there is still WARNING that please check the component file name.
Your linter just tells you, that your Component name should be a multi word like MyTemp instead of just Temp. you could rename the component or disable the linting rule
So I also encounter the same error, All you have to do is change the name of the component from Temp to MyTemp or any other two word combination.
Here, you can also see and take the idea from the vue/multi-word-component-names Documentation, They explained things very clearly and is very helpful :-
https://eslint.vuejs.org/rules/multi-word-component-names.html